// 全局的向左偏移的像素
let left = 0;
// 偏移后距离下一次偏移的时间（毫秒数）
let time = 20;
// 轮播的图片数量
let imgCount;
// 轮播图的宽度，不要设置成质数（只能被0和它自己整除）
const imgWidth = 980;

/**
 * 页面加载完之后做的动作
 */
$(document).ready(function(){
    initShowOrHide();
    /* 轮播图 */
    initBanner();
    /* tab页 */
    // initTabs();
});

function initBanner() {
    imgCount = $('.banner>ul.imgList img').length - 1;
    moveLeft();
}

/**
 * 延迟递归执行
 */
function moveLeft() {
    // 设置left的下限，如果一旦达到这个下限，就让left重新变成0
    // 0、-980、-2*980、-3*980、-4*980
    if (left <= -imgCount * imgWidth) {
        left = 0;
    }
    time = (left % imgWidth === 0) ? 2000 : 20;
    $('.banner>ul.imgList').css('margin-left', left + 'px');
    // 判断当前是在滚动第几张图片，0-3
    let index = Math.floor(-left / imgWidth);
    // 切换ico
    changeIco(index);
    // -11 -22 -33 -44... 能不能到 -980 -1960 ？
    left -= 10; // 每次偏移的像素，变大速度就加快，这个数值只能被imgWidth整除
    setTimeout(moveLeft, time); // 偏移的间隔，变大速度会减慢
}

function changeImg(count) {
    let left_temp = -imgWidth * count;
    $('.banner>ul.imgList').css('margin-left', left_temp + 'px');
    changeIco(count);
    left = left_temp;
}

function changeIco(count) {
    $('.banner>ul.icoList p').css('background-color', 'rgba(0, 0, 0, 0.5)')
        .eq(count).css('background-color', 'rgb(255, 0, 0)');
}


function prevTo() {
    // 计算当前图片张数
    let index = Math.floor(-left / imgWidth);
    let prev = index - 1;
    // 如果index是0（当前是第一张图片），prev应该等于imgCount - 1（最后一张图片）
    if (index === 0) {
        prev = imgCount - 1;
    }
    changeImg(prev);
}

function nextTo() {
    // 计算当前图片张数
    let index = Math.floor(-left / imgWidth);
    let next = index + 1;
    // 如果index是imgCount - 1（当前是最后一张图片），next应该等于0（第一张图片）
    if (index === imgCount - 1) {
        next = 0;
    }
    changeImg(next);
}

function initShowOrHide() {
    $('.list').mouseover(function(){
        $('.list>div').show();
    }).mouseout(function(){
        $('.list>div').hide();
    });
}

function on_mouse(x,id) {
    x.style.backgroundColor='red';
    for (var i = 1; i < 8; i++) {
        if (i === id){
            document.getElementById("table"+i).style.display="table";
            continue;
        }
        document.getElementById("table"+i).style.display="none";
    }

}
function out_mouse(x,id) {
    x.style.backgroundColor='#ffe69c'
}
